<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="padding: 100px">
<canvas id="cvs" width="900" height="600" style=" border: 1px solid #000;"></canvas>
<script>
    //1获取标签和上下文
    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');
    ctx.moveTo(200,200);
    ctx.arc(200,200,100,0,90*Math.PI/180,false);
//    ctx.closePath();
    ctx.fillStyle = 'pink';
    ctx.fill();


    ctx.beginPath();
    ctx.moveTo(200,200);
    ctx.arc(200,200,100,0,90*Math.PI/180,true);
    ctx.fillStyle = 'yellow';
    ctx.fill();



</script>

</body>
</html>